<template>
  <n-layout has-sider class="containers">
    <n-layout-sider v-show="isCollapseOpen" class="sider" width="400px">
      <div class="sider">
        <div class="sider-main">
          <car-tree-select
            needCarHeader
            needCheckMode
            needRealTime
            @onSelect="handleCarSelect"
            @openVideo="openVideo"
            @toStarCar="toStarCar"
            @fitviewCar="fitviewCar"
            @handleCarDict="handleCarDict"
            @onCheck="onCarSelect"
          />
        </div>
      </div>
    </n-layout-sider>
    <div class="car-tree-collapse">
      <img @click="toCollapse(false)" v-if="isCollapseOpen" :src="collapseToClose" />
      <img @click="toCollapse(true)" v-if="!isCollapseOpen" :src="collapseToOpen" />
    </div>
    <!-- <n-layout-header></n-layout-header> -->
    <n-layout-content>
      <div class="content">
        <!-- 已选择的车辆列表 -->
        <!-- <div id="wx-map"></div> -->
        <WxMap />
        <div :style="{ bottom: showRealCar ? '312px' : '0px' }" class="bottom-collapse">
          <img @click="toBottomCollapse(false)" v-if="showRealCar" :src="collapseToClose" />
          <img @click="toBottomCollapse(true)" v-if="!showRealCar" :src="collapseToOpen" />
        </div>
        <real-car-list
          v-if="showRealCar"
          :selectCars="currentCars"
          @toRightDetail="toRightDetail"
        />
        <car-detail-box
          v-if="showDetailBox"
          :carItem="carItem"
          @preCar="preCar"
          @nextCar="nextCar"
          @handleSpeaking="handleSpeaking"
          @handleCarVideo="openVideo"
          @handleCarSendMessage="openSendMessage"
          @handleFitviewCar="handleFitviewCar"
          @handleCallTheRoll="handleCallTheRoll"
          @close="
            () => {
              showDetailBox = false;
            }
          "
          @toBottom="showRealCarsList"
        />
      </div>
    </n-layout-content>
  </n-layout>
</template>

<script lang="ts">
  import { defineComponent, ref, onMounted } from 'vue';
  import carTreeSelect from '@/components/CarTreeSelect/CarTreeSelect.vue';
  import collapseToClose from '@/assets/icons/collapse-to-close.svg?external';
  import collapseToOpen from '@/assets/icons/collapse-to-open.svg?external';
  import WxMap from '@/components/WxMap/WxMap.vue';
  export default defineComponent({
    components: {
      carTreeSelect,
      WxMap,
    },
    setup() {
      const isCollapseOpen = ref(true); // 侧边树形菜单是否展开
      const toCollapse = (flag) => {
        isCollapseOpen.value = flag;
      };
      const map = ref(null);
      onMounted(() => {});
      return {
        isCollapseOpen,
        collapseToClose,
        collapseToOpen,
        toCollapse,
      };
    },
  });
</script>

<style lang="less" scoped>
  @import url('./Lists.less');
  .container {
    height: 100%;
  }
  .star-checkbox :deep span {
    vertical-align: bottom;
  }
  .map-search-container {
    background-color: white;
    width: 200px;
    // height: 44px;
    position: absolute;
    top: 12px;
    left: 16px;
    z-index: 2;
    :deep .ant-select-selection {
      border: none !important;
    }
    :deep .ant-input {
      height: 44px;
      line-height: 44px;
      font-size: 12px;
      border-right: none !important;
      border: none;
    }
    :deep .ant-input-group-addon {
      cursor: pointer;
      border: none;
      background-color: inherit;
      // padding: 15px 13px !important;
      box-sizing: border-box;
    }
  }
  .map-toolbar-container {
    height: 44px;
    line-height: 44px;
    overflow: hidden;
    position: absolute;
    top: 10px;
    right: 24px;
    min-width: 498px;
    background-color: white;
    z-index: 2;
    display: flex;
    .map-toolbar-item {
      min-width: 75px;
      height: 44px;
      font-size: 12px;
      color: #333;
      line-height: 44px;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 10px 8px;
      box-sizing: border-box;
      position: relative;
      color: #64666d;
    }
    .map-toolbar-item-active {
      color: #4871da;
    }
    .map-toolbar-item:hover {
      color: #4871da;
    }
    .map-toolbar-item:nth-child(n + 3)::before {
      content: ' ';
      position: absolute;
      left: 0;
      top: 50%;
      bottom: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: 1px;
      height: 18px;
      background-color: #eee;
    }
    .map-toolbar-item:last-child::before {
      content: none;
    }
    // .map-toolbar-item::before{
    // }
    // .map-toolbar-item{
    //   border-left: 1px solid #eee;
    // }
  }
  :deep .ant-input {
    font-size: 12px;
  }
  :deep .ant-checkbox-wrapper {
    display: flex;
    align-items: center;
    line-height: 20px;
  }
  :deep .ant-checkbox {
    top: unset !important;
  }
  :deep .ant-checkbox-inner {
    width: 12px;
    height: 12px;
  }

  :deep .ant-layout-sider-children {
    overflow: visible !important;
  }
</style>
